import { putUserAssignApi } from "@/services/user";

import { FC } from "react";

import { Modal, Form, Input, message } from "antd";

type AssignRoleStateType = {
  state: boolean;
  row: Partial<USER.Item>;
};
interface Props {
  assignRoleState: AssignRoleStateType;
  setAssignRoleState: (data: AssignRoleStateType) => void;
  onTableData: Function;
}
const Index: FC<Props> = ({
  assignRoleState,
  setAssignRoleState,
  onTableData,
}) => {
  const onFinish = async (value: Partial<USER.Item>) => {
    // console.log(value);
    const { state, msg } = await putUserAssignApi({
      user_id: assignRoleState.row.user_id as number,
      role_name: value.role_name as string,
    });
    if (state === 200) {
      onTableData(); // 获取最新数据
      setAssignRoleState({
        // 关闭对话框
        ...assignRoleState,
        state: false,
      });
    } else {
      message.error(msg);
    }
  };

  const [form] = Form.useForm(); // form 是固定语法，可以在逻辑层操作表单数据

  //   const onOk = () => {
  //     // console.log(form); {获取单个input框数据的方法，重置单个input框数据的方法，获取所有input框数据的方法，触发表单提交的方法类似于htmlTypesubmit}
  //   };

  return (
    <Modal
      title="分配角色"
      open={assignRoleState.state}
      onOk={() => form.submit()}
      onCancel={() => {
        setAssignRoleState({
          ...assignRoleState,
          state: false,
        });
      }}
    >
      <Form onFinish={onFinish} form={form} initialValues={assignRoleState.row}>
        <Form.Item label="当前用户" name="username">
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item label="当前角色" name="role_name">
          <Input placeholder="请输入角色名" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Index;
